<template>
  <div class="bottom-view">
    <div class="view">
      <el-card shadow="hover">
        <template v-slot:header>
          <div class="title-wrapper">关键词搜索</div>
        </template>
        <template>
          <div class="chart-wrapper">
            <div class="chart-inner">
              <div class="chart">
                <div class="chart-title">搜索用户数</div>
                <div class="chart-data">90,769</div>
                <v-chart :option="searchUserOption" />
              </div>
              <div class="chart">
                <div class="chart-title">搜索量</div>
                <div class="chart-data">198,065</div>
                <v-chart :option="searchUserOption" />
              </div>
            </div>
            <div class="table-wrapper">
              <el-table :data="tableData">
                <el-table-column prop="rank" label="排名" />
                <el-table-column prop="keyword" label="关键词" />
                <el-table-column prop="count" label="总搜索量" />
                <el-table-column prop="users" label="搜索用户数" />
                <el-table-column prop="range" label="搜索占比" />
              </el-table>
              <el-pagination
                layout="prev, pager, next"
                :total="100"
                :page-size="4"
                background
                @current-change="onPageChange" />
            </div>
          </div>
        </template>
      </el-card>
    </div>
    <div class="view">
      <el-card shadow="hover">
        <template v-slot:header>
          <div class="title-wrapper">
            <div class="title">分类销售排行</div>
            <div class="radio-wrapper">
              <el-radio-group v-model="radioSelect" size="small">
                <el-radio-button label="品类"></el-radio-button>
                <el-radio-button label="商品"></el-radio-button>
              </el-radio-group>
            </div>
          </div>
        </template>
        <template>
          <div class="chart-wrapper">
            <v-chart :option="categoryOptions" />
          </div>
        </template>
      </el-card>
    </div>
  </div>
</template>

<script>
  export default {
    data () {
      return {
        searchUserOption: {
          xAxis: {
            type: 'category'
          },
          yAxis: {
            show: false,
            min: 0,
            max: 350
          },
          series: [{
            type: 'line',
            data: [200, 80, 200, 300, 150, 220, 100, 200],
            areaStyle: {
              color: 'rgba(95,187,255,.5)'
            },
            lineStyle: {
              color: 'rgb(95,187,255)'
            },
            itemStyle: {
              opacity: 0
            },
            smooth: true
          }],
          grid: {
            top: 0,
            left: 0,
            bottom: 0,
            right: 0
          }
        },
        searchNumOption: {},
        tableData: [
          { id: 1, rank: 1, keyword: '上海', count: 100, users: 90, range: '90%' },
          { id: 2, rank: 2, keyword: '北京', count: 100, users: 80, range: '80%' },
          { id: 3, rank: 3, keyword: '杭州', count: 100, users: 70, range: '70%' },
          { id: 4, rank: 4, keyword: '西安', count: 100, users: 50, range: '50%' }
        ],
        radioSelect: '品类',
        categoryOptions: {}
      }
    },
    methods: {
      onPageChange (page) {
        console.log(page)
      },
      renderPieChart () {
        const mockData = [
          {
            legendname: '电子数码',
            value: 67,
            percent: '25.40%',
            itemStyle: {
              color: '#65d489'
            },
            name: '电子数码 | 25.40%'
          },
          {
            legendname: '衣帽时尚',
            value: 97,
            percent: '22.30%',
            itemStyle: {
              color: '#8d7fec'
            },
            name: '衣帽时尚 | 22.30%'
          },
          {
            legendname: '零食快消',
            value: 92,
            percent: '16.15%',
            itemStyle: {
              color: '#5085f2'
            },
            name: '零食快消 | 16.15%'
          },
          {
            legendname: '运动健身',
            value: 92,
            percent: '10.95%',
            itemStyle: {
              color: '#a8d227'
            },
            name: '运动健身 | 10.95%'
          },
          {
            legendname: '其他产品',
            value: 92,
            percent: '13.15%',
            itemStyle: {
              color: '#f9a364'
            },
            name: '其他产品 | 13.15%'
          }
        ]
        this.categoryOptions = {
          title: [{
            text: '品类分布',
            textStyle: {
              fontSize: 14,
              color: '#666'
            },
            left: 20,
            top: 20
          }, {
              text: '累计订单量',
              subtext: '320',
              x: '32.5%',
              y: '42.5%',
              textStyle: {
                fontSize: 14,
                color: '#999'
              },
              subtextStyle: {
                fontSize: 28,
                color: '#333'
              },
              textAlign: 'center'
            }],
          series: [{
            type: 'pie',
            data: mockData,
            label: {
              normal: {
                show: true,
                position: 'outter',
                formatter: function (params) {
                  return params.data.legendname
                }
              }
            },
            center: ['33%', '50%'],
            radius: ['40%', '60%'],
            labelLine: {
              normal: {
                length: 5,
                length2: 3,
                smooth: true
              }
            },
            clockwise: true,
            itemStyle: {
              borderWidth: 4,
              borderColor: '#fff'
            }
          }],
          legend: {
            type: 'scroll',
            orient: 'vertical',
            height: 250,
            left: '70%',
            top: 'middle',
            textStyle: {
              color: '#8c8c8c'
            }
          },
          tooltip: {
            trigger: 'item',
            formatter: function (params) {
              console.log(params)
              const str = params.marker + params.data.legendname + '<br/>' +
                '数量: ' + params.data.value + '<br/>' + '占比: ' + params.data.percent + '%'
              return str
            }
          }
        }
      }
    },
    mounted () {
      this.renderPieChart()
    }
  }
</script>

<style lang="scss" scoped>
.bottom-view {
  display: flex;
  margin-top: 20px;

  .view {
    flex: 1;
    width: 50%;
    box-sizing: border-box;

    &:first-child {
      padding: 0 10px 0 0;
    }

    &:last-child {
      padding: 0 0 0 10px;
    }

    .title-wrapper {
      display: flex;
      align-items: center;
      height: 60px;
      box-sizing: border-box;
      border-bottom: 1px solid #eee;
      font-size: 14px;
      font-weight: 500;
      padding: 0 0 0 20px;

      .radio-wrapper {
        flex: 1;
        display: flex;
        justify-content: flex-end;
        padding-right: 20px;
      }
    }

    .chart-wrapper {
      display: flex;
      flex-direction: column;
      height: 452px;

      .chart-inner {
        display: flex;
        padding: 0 10px;
        margin-top: 20px;

        .chart {
          flex: 1;
          padding: 0 10px;

          .chart-title {
            color: #999;
            font-size: 14px;
          }

          .chart-data {
            font-size: 22px;
            color: #333;
            font-weight: 500;
            letter-spacing: 2px;
          }

          .echarts {
            height: 50px;
          }
        }
      }

      .table-wrapper {
        flex: 1;
        margin-top: 20px;
        padding: 0 20px 20px;

        .el-pagination {
          display: flex;
          justify-content: flex-end;
          margin-top: 15px;
        }
      }
    }
  }
}
</style>
